<template>
  <div class="topic">
    <!-- 列表 -->
    <van-list class="list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <router-link tag="div" :to="`/topic/topicdetail?id=${item.id}`" class="item" v-for="item in list" :key="item.id">
        <img :src="item.scene_pic_url" alt="">
        <div class="title">{{item.title}}</div>
        <div class="subtitle">{{item.subtitle}}</div>
        <div class="price">{{item.price_info}}元起</div>
      </router-link>
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/topic";
export default {
  name: "topic",
  data() {
    return {
      page: 1, // 专题接口列表 - 参数
      list: [], // 列表
      loading: false, // 加载状态关闭
      finished: false, // 数据未全部加载完成
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {},
  // 准备
  mounted() {},
  // 方法
  methods: {
    // 列表
    onLoad() {
      // 专题接口列表
      listaction({
        page: this.page,
      }).then((res) => {
        console.log(res);
        // 加载状态结束
        this.loading = false;
        this.list.push(...res.data.data);
        this.page++;
        if (this.page > res.data.total) {
          // 数据全部加载完成
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.topic {
  margin-bottom: 50px;
  // 列表
  .list {
    background-color: #f4f4f4;
    .van-cell {
      padding: 0;
      margin: 0;
    }
    .item {
      background-color: #fff;
      margin-bottom: 10px;
      overflow: hidden;
      img {
        width: 100%;
        // 去除图片下的缝隙
        vertical-align: top;
      }
      .title {
        font-size: 17px;
        color: #333;
        margin: 15px auto;
        text-align: center;
      }
      .subtitle {
        font-size: 12px;
        color: #999;
        text-align: center;
        padding: 0 10px;
        // 超出2行后不换行省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .price {
        font-size: 13px;
        color: #b4282d;
        margin: 10px auto;
        text-align: center;
      }
    }
  }
}
</style>